<template>
  <div>
    <PageWrapper :contentFullHeight="true" :contentBackground="true">
      <BasicTable @register="registerTable">
        <template #action="{ record }">
          <TableAction
            :actions="[
              {
                icon: 'ion:ios-paperplane-outline',
                color: 'warning',
                onClick: handleChange.bind(null, record),
                auth: '',
                tooltip: t('routes.task.myTask.changeTask'),
              },
            ]"
          />
        </template>
      </BasicTable>
    </PageWrapper>
  </div>
</template>

<script setup lang="ts">
  import { PageWrapper } from '/@/components/Page';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { myTaskColumns, myTaskFormSchema } from './tableData';

  const { t } = useI18n();

  const [registerTable, { reload }] = useTable({
    rowKey: 'id',
    columns: myTaskColumns(),
    useSearchForm: true,
    showTableSetting: true,
    formConfig: {
      labelWidth: 120,
      schemas: myTaskFormSchema,
      autoSubmitOnEnter: true,
    },
    bordered: true,
    canResize: false,
    actionColumn: {
      width: 150,
      title: t('common.action'),
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
  });
</script>

<style lang="less" scoped>
  ::v-deep(.ant-calendar-picker) {
    width: 100% !important;
  }
</style>
